<template>
    <yi-dialog class="set-group" title="设置分组" width="600px"
        :visible.sync="dialogVisible"
        isHandle
        @confirm="confirm"
        @cancel="cancel">
        <h3 class="field-bind-title">报表当前绑定</h3>
        <yi-table ref="reportTable" :data="reportTable.data" @getData="reportGetData" max-height="150px" rowClassKey="dictCode">
            <el-table-column label="绑定分组">
                <template slot-scope="{ row }">{{ dictTypeDict(row.dictType) }}</template>
            </el-table-column>
            <el-table-column label="绑定字典">
                <template slot-scope="{ row }">{{ row.dictLabel }}</template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="{ row }">
                    <el-tag :type="handleTagType(row.bindStatus)">{{ hanleTagText(row.bindStatus) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popconfirm title="是否解除绑定？" @confirm="unbind(scope)">
                        <el-button slot="reference" type="text">解除绑定</el-button>    
                    </el-popconfirm>
                </template>
            </el-table-column>
        </yi-table>
        <h3 class="field-bind-title marginTop15">设置字典绑定</h3>
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="选择分组">
                <el-select v-model="group" size="mini" placeholder='选择分组字典表' clearable @change="handleGroup">
                    <el-option v-for="(item) in dictData" :key="item.dictId" :label="item.dictName" :value="item.dictType"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <yi-table ref="dictTable" :data="dictTable.data" :total="dictTable.total" @getData="dictGetData" max-height="375px" rowClassKey="dictCode">
            <el-table-column>
                <template slot="header">
                    <el-button type="primary" size="mini" @click.stop="setDict()">新增字典数据</el-button>
                </template>
                <el-table-column label="字典标签">
                    <template slot-scope="scope">{{ scope.row.dictLabel }}</template>
                </el-table-column>
                <el-table-column label="字典键值" width="160">
                    <template slot-scope="scope">{{ scope.row.dictValue }}</template>
                </el-table-column>
                <el-table-column label="排序">
                    <template slot-scope="{ row }">
                        <el-input-number v-model="row.dictSort" :controls="false" :min="0" @change="handleDictSort(row)"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="{ row }">
                        <el-popconfirm :title="`${row.dictValue != '0' ? '是否覆盖已绑定的报表ID？' : '是否要绑定报表ID？'}`" @confirm="bind(row)">
                            <el-button slot="reference" type="text" :disabled="canClick(row)">绑定</el-button>
                        </el-popconfirm>
                        <el-popconfirm title="是否删除字典表数据？" @confirm="deleteDict(row)" class="popconfirm">
                            <el-button slot="reference" type="text" :disabled="canClick(row)">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table-column>
        </yi-table>
    </yi-dialog>
</template>

<script>
import { warning, success, errorInfo } from "@/utils/errorInfo";
import { updateData, delData, addData } from '@/api/system/dict/data';
import bindMixin from "../../mixin/index";
export default {
    name: "setGroup",
    mixins: [bindMixin],
    props: {
        reportData: {
            type: Object
        }
    },
    data() {
        return {
            dialogVisible: false,
            group: "", // 选择分组
            reportTable: { // 绑定/待绑定
                data: []
            },
            dictTable: { // 字典表数据
                data: [],
                total: 0
            }
        }
    },
    methods: {
        open(data) {
            this.dialogVisible = true;
            if (data && data.length > 0) { // 回显数据
                this.reportTable.data = data;
            }
        },
        dictGetData() {
            this.$refs.dictTable.loading = false;
        },
        reportGetData() {
            this.$refs.reportTable.loading = false;
        },
        handleGroup(val) { // 获取字典数据
            val && this.getDicts_promise(val).then((data) => {
                this.dictTable.data = data;
            })
        },
        getDicts_promise(val) { // 获取字典表
            return new Promise((resolve) => {
                this.getDicts(val).then((res) => {
                    let data = res?.data || [];
                    resolve(data);
                });
            })
        },
        setDict() { // 添加字典表数据
            if (this.group) {
                this.addData('0');
            } else warning('请选择分组');
        },
        handleDictSort(row) { // 处理原有字典数据的修改
            if (!isNaN(row.dictSort)) {
                if (row.dictCode) { // 原有字典改变排序
                    updateData({
                        dictCode: row.dictCode,
                        dictSort: row.dictSort,
                        dictType: row.dictType,
                        status: row.status,
                        dictLabel: row.dictLabel,
                        dictValue: row.dictValue
                    }).then((res) => {
                        success('字典数据修改成功');
                    })
                }
            } else errorInfo('注意排序字段不可以设置为空或null');
        },
        bind(row) { // 绑定
            if (this.$route.query.id) {
                updateData({
                    dictCode: row.dictCode,
                    dictSort: row.dictSort,
                    dictType: row.dictType,
                    status: row.status,
                    dictLabel: row.dictLabel,
                    dictValue: this.$route.query.id
                }).then((res) => {
                    success('绑定成功');
                    this.handleGroup(this.group);
                    this.reportTable.data.push({
                        dictCode: row.dictCode,
                        dictSort: row.dictSort,
                        dictType: row.dictType,
                        status: row.status,
                        dictLabel: row.dictLabel,
                        dictValue: this.$route.query.id,
                        bindStatus: 1 // 0 待绑定 1 已绑定
                    })
                })
            } else { // 未有报表ID
                this.reportTable.data.push({
                    dictCode: row.dictCode,
                    dictSort: row.dictSort,
                    dictType: row.dictType,
                    status: row.status,
                    dictLabel: row.dictLabel,
                    dictValue: row.dictValue,
                    bindStatus: 0 // 0 待绑定 1 已绑定
                })
            }
        },
        unbind(scope) { // 解除绑定
            if (this.$route.query.id) { // 编辑状态，可以直接引入绑定
                if (scope.row.bindStatus == 2) { // 失效
                    this.reportTable.data.splice(scope.$index, 1);
                } else {
                    updateData({
                        dictCode: scope.row.dictCode,
                        dictSort: scope.row.dictSort,
                        dictType: scope.row.dictType,
                        status: scope.row.status,
                        dictLabel: scope.row.dictLabel,
                        dictValue: '0'
                    }).then(() => {
                        success('解绑成功');
                        this.handleGroup(this.group);
                        this.reportTable.data.splice(scope.$index, 1);
                    })
                }
            } else { // 无报表ID
                this.reportTable.data.splice(scope.$index, 1);
            }
        },
        canClick(row) { // 数据是否可以进行绑定
            let lock = this.reportTable.data.some(item => (item.dictCode && item.dictCode == row.dictCode));
            return lock;
        },
        deleteDict(row) { // 删除字典表数据
            delData(row.dictCode).then((res) => {
                success('删除成功');
                this.handleGroup(this.group);
            })
        },
        confirm() {
            if (this.reportTable.data.length > 0) {
                this.$emit('bind', this.reportTable.data);
                this.clear();
                this.dialogVisible = false;
            } else warning('暂未绑定任何字典数据');
        },
        cancel() {
            this.$emit('bind', this.reportTable.data);
            this.clear();
            this.dialogVisible = false;
        },
        clear() {
            this.reportTable.data.length = 0;
        },
        // 字典表公共代码
        addData(dictValue) {
            return new Promise((resolve) => {
                addData({
                    dictLabel: this.reportData.title,
                    dictSort: 0,
                    dictType: this.group,
                    dictValue // 0 未绑定
                }).then(() => {
                    success('添加字典数据成功');
                    this.handleGroup(this.group);
                    resolve();
                })
            })
        }
    }
}
</script>
